<template>
  <div>
    <van-nav-bar title="产品详情" left-arrow @click-left="onClickLeft">
      <template #left>
        <img
          src="http://10.31.169.37:3000/images/定制/产品详情箭头.png"
          alt=""
        />
      </template>
    </van-nav-bar>
    <div class="detail-main">
      <div class="log">
        <img
          src="http://10.31.169.37:3000/images/定制/兰蔻图标.png"
          alt=""
        /><span>兰蔻</span
        ><img src="http://10.31.169.37:3000/images/定制/兰蔻箭头.png" alt="" />
      </div>
      <div class="img">
        <img src="http://10.31.169.37:3000/images/定制/图层 6.png" alt="" />
        <div class="composition">
          <p>全成分表</p>
          <h2 @click="zanwu">{{ DetailData.composition }}种成分 ></h2>
        </div>
      </div>
      <div class="title">
        <p>{{ DetailData.name }}</p>
        <p>{{ DetailData.en }}</p>
      </div>
      <div class="detail-content">
        <div class="address">
          <div class="add-left">产地 :{{ DetailData.addr }}</div>
          <div class="add-right" @click="zanwu">
            <img
              src="http://10.31.169.37:3000/images/定制/矢量智能对象.png"
              alt=""
            />使用说明
          </div>
        </div>
        <div class="prise">参考价格 : {{ DetailData.prise }}</div>
        <div class="do">
          功效 :
          <div>{{ DetailData.do }}</div>
        </div>
      </div>
      <div class="suit">
        <div class="suit-head">
          <h1>适用肤质范围</h1>
          <img
            src="http://10.31.169.37:3000/images/定制/？号灰色.png"
            alt=""
            @click="zanwu"
          />
        </div>
        <div class="sui-type">
          <div>
            <img
              src="http://10.31.169.37:3000/images/定制/img.png"
              alt=""
            />适用范围
          </div>
          <div>
            <img
              src="http://10.31.169.37:3000/images/定制/img01.png"
              alt=""
            />最适范围
          </div>
          <div>
            <img
              src="http://10.31.169.37:3000/images/定制/img4.png"
              alt=""
            />非适用范围
          </div>
        </div>
        <div class="sui-data">
          <div>
            <div class="s-d-l">干油性</div>
            <div class="s-d-r">
              <img
                src="http://10.31.169.37:3000/images/定制/GANYOU.png"
                alt=""
              />
              <ul>
                <li>干</li>
                <li>偏干</li>
                <li>正常</li>
                <li>混合</li>
                <li>偏油</li>
                <li>油</li>
              </ul>
            </div>
          </div>
          <div>
            <div class="s-d-l">敏感性</div>
            <div class="s-d-r">
              <img
                src="http://10.31.169.37:3000/images/定制/MINGAN.png"
                alt=""
              />
              <ul>
                <li>耐受</li>
                <li>正常</li>
                <li>轻敏</li>
                <li>重敏</li>
              </ul>
            </div>
          </div>
          <div>
            <div class="s-d-l">痘痘程度</div>
            <div class="s-d-r">
              <img
                src="http://10.31.169.37:3000/images/定制/DOUDOU.png"
                alt=""
              />
              <ul>
                <li>无痘</li>
                <li>轻度</li>
                <li>中度</li>
                <li>重度</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="pair" @click="zanwu">点此查看你与这款产品的匹配度</div>
      </div>
      <div class="official">
        <h1>官方链接</h1>
        <div class="go">
          <div class="go-top">
            <img
              src="http://10.31.169.37:3000/images/定制/lankou.png"
              alt=""
            />{{ DetailData.store }}
          </div>
          <div class="go-bot">
            <img
              src="http://10.31.169.37:3000/images/定制/图层 6.png"
              alt=""
            />{{ DetailData.name
            }}<a
              href="https://www.lancome.com.cn/item/LAN00064?utm_source=baidu%5Fpc%5Fkws&utm_medium=cpc&utm_term=%E5%85%B0%E8%94%BB%E6%B4%81%E9%9D%A2%E6%91%A9%E4%B8%9D&utm_campaign=2021%5FBrand%5FBrand%20SC&utm_content=%E6%B8%85%E6%BB%A2%E6%B4%81%E9%9D%A2%E4%B9%B3%5FCleanser%5F%E6%91%A9%E4%B8%9D%5FBP"
              >前往查看 ></a
            >
          </div>
        </div>
      </div>
      <div class="daren">
        <h1>达人点评</h1>
        <div>
          <img src="http://10.31.169.37:3000/images/定制/图层 4.png" alt="" />
        </div>
      </div>
      <div class="score">
        <h1>用户评价</h1>
        <div class="score-data">
          <div class="score-l">
            <h1>{{ DetailData.score }}</h1>
            <van-rate
              v-model="DetailData.scorenum"
              size="12px"
              color="rgb(100,200,201)"
              allow-half
              readonly
            />
            <p>{{ DetailData.scorer }}评论</p>
          </div>
          <div class="score-r">
            <img
              src="http://10.31.169.37:3000/images/定制/矢量智能对象(1).png"
              alt=""
            />
            <div v-if="DetailData.scores" class="ratios">
              <div class="ratio" v-for="i in 5" :key="i">
                <div :style="{ width: DetailData.scores[i - 1] }"></div>
              </div>
            </div>
          </div>
        </div>
        <p>高于90%的洁面产品75%的人会回购</p>
        <h4>完成肤质测试后查看同肤质评分~</h4>
        <h5 @clicl="zanwu">查看各肤质评分 >></h5>
      </div>

      <van-tabs v-model="active" title-active-color="rgb(127, 198, 199)">
        <van-tab title="全部"></van-tab>
        <van-tab title="只看同肤质"></van-tab>
        <van-tab title="按肤质"></van-tab>
        <van-tab title="按星级"></van-tab>
      </van-tabs>

      <div class="comment">
        <h1>热门评分</h1>
        <comment
          v-for="(item, index) in DetailData.commentdata"
          :commentdata="item"
          :key="index"
        />
      </div>
    </div>
    <van-grid :column-num="2" direction="horizontal">
      <van-grid-item>
        <img src="http://10.31.169.37:3000/images/定制/收藏.png" alt="" /><b
          class="xiu"
          >+收藏(999)</b
        >
      </van-grid-item>
      <van-grid-item>
        <strong class="xiu">用过</strong>
        <van-rate
          v-model="val"
          size="14px"
          void-color="#bbb"
          color="rgb(100,200,201)"
        />
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
import { NavBar, Rate, Tab, Tabs, Grid, GridItem, Toast } from "vant";
import { mapState, mapActions } from "vuex";
import comment from "../components/detail/comment.vue";
export default {
  data() {
    return {
      active: 0,
      val: 0,
      aa: "25%",
    };
  },
  activated() {},
  watch: {},
  created() {},
  computed: {
    ...mapState(["DetailData"]),
  },
  mounted() {
    this.GetDetailasync();
  },
  methods: {
    ...mapActions(["GetDetailasync"]),
    geturl(i) {
      return "http://10.31.169.37:3000/images/定制/" + i + ".png";
    },
    onClickLeft() {
      Toast("返回");
      this.$router.go(-1);
    },
    zanwu() {
      Toast("功能未开放");
    },
  },
  components: {
    VanNavBar: NavBar,
    VanRate: Rate,
    VanTab: Tab,
    VanTabs: Tabs,
    comment,
    vanGridItem: GridItem,
    vanGrid: Grid,
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/var";
.van-nav-bar .van-nav-bar__left img {
  width: auto;
  height: 26px;
}

.van-hairline--top {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  font-size: 16px;
  border-top: 1px solid #ccc;
  img {
    width: 30px;
  }
  .xiu {
    font-weight: 100;
    margin: 0 5px;
  }
}

/deep/ .van-tabs__line {
  background-color: rgb(100, 200, 201);
}

/deep/ .van-tab:nth-child(2) {
  flex: 4;
  width: 100%;
  text-align: left;
  float: left;
  position: relative;
}

.comment {
  h1 {
    font-size: 20px;
    margin: 20px 0;
  }
}

.score {
  h1 {
    font-size: 20px;
    margin: 20px 0;
  }
  p,
  h5 {
    font-size: 15px;
    color: rgb(100, 200, 201);
    text-align: right;
    margin: 20px 0;
  }
  h4 {
    font-size: 15px;
    margin: 10px 0;
  }
}

.score-data {
  display: flex;
  justify-content: space-between;
  .score-l {
    text-align: center;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h1 {
      font-size: 25px;
      margin: 5px 0;
    }
    p {
      margin: 0;
    }
  }
  .score-r {
    flex: 1;
    display: flex;
    justify-content: space-between;
    img {
      width: 60px;
      height: 70px;
    }
    .ratios {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 0 15px;
      .ratio {
        width: 100%;
        height: 5px;
        background: rgb(230, 230, 230);
        div {
          height: 100%;
          background: rgb(100, 200, 201);
        }
      }
    }
  }
}

.daren {
  h1 {
    font-size: 20px;
    margin: 20px 0;
  }
  div {
    width: 100%;
    img {
      width: 100%;
    }
  }
}

.official {
  h1 {
    font-size: 20px;
    margin: 20px 0;
  }
  .go {
    color: rgb(230, 33, 17);
    border: 1px solid red;
    border-radius: 5px;
    font-size: 18px;
    overflow: hidden;
    .go-top {
      background: rgb(255, 237, 237);
      padding: 10px;
      font-size: 16px;
      img {
        width: 30px;
        margin-right: 5px;
      }
    }
    .go-bot {
      color: black;
      font-weight: 999;
      padding: 20px;
      img {
        width: 60px;
      }
      a {
        color: rgb(255, 128, 127);
        font-weight: 500;
        font-size: 15px;
        float: right;
        margin-right: -10px;
        margin-top: 50px;
      }
    }
    img {
      vertical-align: middle;
    }
  }
}

.pair {
  width: 100%;
  height: 50px;
  background: url("http://10.31.169.37:3000/images/定制/PIPEI.png") no-repeat
    left/100% 100%;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  color: rgb(127, 198, 199);
}

.sui-data > div {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
  .s-d-l {
    width: 120px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-right: 20px;
  }
}

.s-d-r {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  img {
    width: 100%;
    border-bottom: 1px dashe #ccc;
  }
  ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
}

.suit {
  font-size: 13px;
}

.suit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  img {
    width: 30px;
  }
}

.sui-type {
  margin: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgb(214, 213, 213);
  height: 16px;
  border-radius: 8px;
  div {
    img {
      width: 12px;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
}

.detail-main {
  .content();
  padding: 20px;
  border-top: 1px solid #ccc;
  background: #fff;
}

.log {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 102px;
  background: rgba(0, 0, 0, 0.5);
  height: 44px;
  font-size: 17px;
  border-radius: 25px;
  color: #fff;
  img:nth-child(1) {
    width: 36px;
  }
  img:nth-child(3) {
    width: 12px;
  }
}

.img {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 30px;
  img {
    width: 50%;
  }
  .composition {
    border: 1px solid rgb(127, 198, 199);
    border-radius: 5px;
    width: 90px;
    font-size: 15px;
    color: rgb(127, 198, 199);
    text-align: center;
    transform: translateY(50%);
    p {
      border-bottom: 1px solid rgb(127, 198, 199);
      background: rgb(217, 239, 241);
      padding: 5px 0;
    }
    h2 {
      font-size: 15px;
      padding: 10px 0;
      font-weight: 500;
    }
  }
}

.title {
  text-align: center;
  font-size: 18px;
  font-weight: 999;
  p:nth-child(2) {
    font-size: 12px;
    font-weight: 500;
    margin: 10px 0;
  }
}

.detail-content {
  font-size: 15px;
  color: #ccc;
  .address {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    .add-right {
      img {
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }
  .do {
    margin: 10px 0;
    div {
      display: inline-block;
      width: 60px;
      height: 30px;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      border: 1px solid rgb(127, 200, 199);
      color: rgb(127, 200, 199);
    }
  }
}
</style>
